<script lang="ts" setup>
import { postMeberAuahAPI } from '@/api/login';
import { CmnList } from '@/api/type/globale';
import { getCmnListAPI } from '@/api/user';
import { useUserStore } from '@/store/modules/user';
import { FormInstance } from 'element-plus';
import { ref } from 'vue';

const userStore=useUserStore()
//提交表单
let formData=ref({
  certificatesNo: '',
  certificatesType: '',
  certificatesUrl: '',
  name: ''
})
const formRef=ref<FormInstance>()
const rule={
  certificatesNo: [{ required: true, message: '请输入证件号码', trigger: 'blur' }],
  certificatesType: [{ required: true, message: '请选择证件类型', trigger: 'blur' }],
  // certificatesUrl: [{ required: true, message: '请上传证件照片', trigger: 'blur' }],
  name: [{ required: true, message: '请输入用户姓名', trigger: 'blur' }]
} 
const submitForm=async()=>{
   await formRef.value?.validate()
 await postMeberAuahAPI(formData.value)
formRef.value?.resetFields()
   userStore.getMeber()
}
const reset=()=>{
  upload.value.clearFiles()
  formRef.value?.resetFields()
  
}

//图片上传
const upload=ref()
const dialogVisible=ref<boolean>(false)
const successHandler=(response:any)=>{
  //这里有问题拿不到response里url的地址
  console.log(response);
  
  formData.value.certificatesUrl=response.data

}
const preview=()=>{
  dialogVisible.value=true
}
//获取证件类型
const certificatesType =ref<CmnList>()
const getCmnList=async()=>{
  const res=await getCmnListAPI()
  certificatesType.value=res.data
}

getCmnList()
</script>

<template>
  <div class="certification">
    <div class="title"> 实名认证</div>
    <div class="icons">
      <svg t="1728461276841" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13632" width="28" height="28"><path d="M849.066667 617.984l-0.106667 0.213333a13.056 13.056 0 0 1-0.128 0.256c-61.802667 123.562667-147.754667 186.666667-311.381333 261.397334a82.56 82.56 0 0 1-71.573334-1.472c-9.088-4.608-17.962667-9.173333-26.624-13.717334-129.728-68.138667-209.898667-130.56-283.157333-244.693333l-0.064-0.106667-0.213333-0.298666A41.664 41.664 0 0 1 149.333333 597.077333V266.901333a42.666667 42.666667 0 0 1 30.229334-40.810666l296.896-90.517334a85.333333 85.333333 0 0 1 49.749333 0l296.896 90.496A42.666667 42.666667 0 0 1 853.333333 266.901333v332.650667c0 6.4-1.429333 12.736-4.266666 18.432z m-38.4-18.602667V266.88L513.770667 176.405333a42.666667 42.666667 0 0 0-24.874667 0L192 266.88v330.026667a687.573333 687.573333 0 0 0 27.392 39.658666c65.642667 88.064 141.482667 140.778667 265.770667 203.733334a39.893333 39.893333 0 0 0 34.56 0.725333C679.552 768.064 755.2 710.272 810.666667 599.381333z" fill="#4490F1" p-id="13633"></path><path d="M499.2 277.333333a21.333333 21.333333 0 0 1 21.333333 21.333334v277.333333a21.333333 21.333333 0 1 1-42.666666 0V298.666667a21.333333 21.333333 0 0 1 21.333333-21.333334z" fill="#4490F1" p-id="13634"></path><path d="M541.866667 661.333333a42.666667 42.666667 0 1 1-85.333334 0 42.666667 42.666667 0 0 1 85.333334 0z" fill="#4490F1" p-id="13635"></path></svg>
    </div>
    <div class="tips">
      <svg t="1728461371626" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13892" width="12" height="12"><path d="M512 32C246.912 32 32 246.912 32 512c0 265.088 214.912 480 480 480 265.088 0 480-214.912 480-480 0-265.088-214.912-480-480-480z m0 896C282.24 928 96 741.76 96 512S282.24 96 512 96s416 186.24 416 416-186.24 416-416 416z" p-id="13893" fill="#999999"></path><path d="M512 384a32 32 0 0 0-32 32v352a32 32 0 0 0 64 0V416a32 32 0 0 0-32-32z" p-id="13894" fill="#999999"></path><path d="M512 272m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="13895" fill="#999999"></path></svg>
      <span>完成实名认证后才能添加就诊人，正常进行挂号，为了不影响后续步骤，建议提前实名认证。</span>
    </div>
    <div class="context" v-if="userStore.MeberInfo?.authStatus===1">
      <el-form  label-width="auto">
        <el-form-item label="姓名:">{{ userStore.MeberInfo?.name }}</el-form-item>
        <el-form-item label="证件类型:">{{ userStore.MeberInfo?.certificatesType==='10'?'身份证':'户口本' }}</el-form-item>
        <el-form-item label="证件号码:">{{userStore.MeberInfo?.certificatesNo}}</el-form-item>
      </el-form>
    </div>
    <el-form v-else ref="formRef" :model="formData" :rules="rule" style="width: 60%;margin: 20px auto;">
      <el-form-item label="用户姓名" prop="name">
        <el-input v-model="formData.name" placeholder="请输入用户姓名" style="width: 240px"/>
      </el-form-item>
      <el-form-item label="证件类型" prop="certificatesType">
         <el-select v-model="formData.certificatesType"  placeholder="请选择证件类型" style="width: 240px">
            <el-option v-for="item in certificatesType" :key="item.id" :label="item.name" :value="item.value"/>
         </el-select>
      </el-form-item>
      <el-form-item label="证件号码" prop="certificatesNo">
        <el-input v-model="formData.certificatesNo" placeholder="请输入证件号码" style="width: 240px"/>
      </el-form-item>
      <el-form-item label="上传证件">
        <el-upload  list-type="picture-card" ref="upload" :on-remove="formData.certificatesUrl=''"
         :on-preview="preview" :on-success="successHandler" :limit="1" action="/api/oss/file/fileUpload?fileHost=userAuah">
            <img src="../../../assets/images/auth_example.png" alt="">
        </el-upload>
        <el-dialog v-model="dialogVisible" >
            <img w-full style="width: 100%;height: 100px;" v-if="formData.certificatesUrl" :src="formData.certificatesUrl"  alt="Preview Image" />
        </el-dialog>
      </el-form-item>
      <el-row style="height: 60px;" type="flex" justify="end" align="middle">
        <el-col :span="21">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="reset">重写</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.certification {
  .title {
    color: #666;
    font-weight: 700;
    margin-bottom:20px ;
  }
  .icons {
    display: flex;
    align-items: center;
    height: 80px;
    background-color: #f4f9ff;
    svg {
     
      margin: 0 14px 0 20px;
    }
  }
  .tips {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: #999;
    margin: 40px 0;
  }
  .context {
    margin: 80px 0 0 140px;
  }
}
</style>